<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Photo Album" />
  <Content type="html">
    <![CDATA[
    <div style="text-align:center;width:100%">
    <span onclick="moveIt(pN, 'left')" class="arrow"><</span>
    <span onclick="moveIt(pN, 'right')" class="arrow">></span>
    </div>
    <br>
    <div id="content_div"></div>    
    
    
    <style>
    .arrow {color:black;font-weight:bold;cursor:pointer;}
    .arrow:hover {color:#298cca;}
    .images {text-align:center;min-width:600px;}
    .imageContainer {display:inline-block;height:175px;width:175px;padding:5px;background-color:white;text-align:center;vertical-align:middle;}
    .picture {max-height:150px; max-width:150px;border:2px transparent solid;}
    .picture:hover {border:2px #298cca solid;}
    
    </style>
    
    <script>
    var xmlthing, pN, max
    
     function getHtml() {    
       var params = {};  
          params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;  
          var url = "https://picasaweb.google.com/data/feed/base/user/106281913546322963877/albumid/6002613577636303553?alt=rss&kind=photo&authkey=Gv1sRgCJHlwbijkbGM3QE&hl=en_US";  
          gadgets.io.makeRequest(url, response, params);
      };
      function response(obj) {  
        //obj.text contains the text of the page that was requested  
        xmlthing = obj.data;
        pN = 0
        makeGrid(pN)
        
      }
      function moveIt(pageNumber, direction) {
      
      if (direction == "left") {
      if (pageNumber !== 0) {pN = pageNumber - 1}
      }
      else {
      if ((pN + 1) * 16 <= max) {pN = pageNumber + 1}
      }
      makeGrid(pN)
      }
      
      function makeGrid(pageNumber) {  
        var itemList = xmlthing.getElementsByTagName("item");
        max = itemList.length
        var node, ref, i, j, k, l
        var html = "<div class='images'>"
        
        var imageNumber = pageNumber * 16 + 16
        
        if (itemList.length < imageNumber) {
        i = imageNumber - 16
        k = itemList.length
        }
        else {
        i = imageNumber - 16
        k = imageNumber
        }
        
        for (i; i < k ; i++) {
        
          var nodeList = itemList.item(i).childNodes;
                
          for (var j = 0; j < nodeList.length; j++) {
            
            node = nodeList.item(j);
            if (node.nodeName == "link") {
            ref = node.firstChild.nodeValue;
            }
            
            if (node.nodeName == "media:group") {
              ref = node.childNodes.item(0).getAttribute("url")
              html += "<div class='imageContainer'><a target='_blank' href='" + ref + "'><img class='picture' src='" + ref + "'></img></a></div>";
            
            }         
          }
        }
        
        document.getElementById('content_div').innerHTML = html + "</div>";
        
      };
      gadgets.util.registerOnLoadHandler(getHtml);
  
    </script>
    
    ]]>
  </Content>
</Module>